<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header"><h1>deepseek人工智能聊天</h1></el-header>
      <el-main>
        <div v-for="(dialogue, index) in dialogues" :key="index">
          <Dialogue :displayQuestion="dialogue.question" :cardValue="dialogue.answer" />
        </div>
      </el-main>
      <el-footer>
        <el-input
          class="input"
          v-model="question"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          placeholder="聊天输入框"
          maxlength="200"
          show-word-limit
        />
        <el-button class="send-button" type="primary" :disabled="isSending" @click="send">发送</el-button>
      </el-footer>
    </el-container>
    <div class="left_menu">
      <el-icon :size="40" color="#909399" @click="goToHome"><House /><el-tag>回到首页</el-tag></el-icon>
      <el-icon :size="40" @click="updateAIChat"><Refresh /><el-tag>新建对话</el-tag></el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import * as marked from 'marked';
import axios from '../axios'
import { House } from '@element-plus/icons-vue';
import { Refresh } from '@element-plus/icons-vue';
import Dialogue from '../components/Dialogue.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const goToHome = () => {
  router.push({ name: 'Home' });
};

const updateAIChat = () => {
  dialogues.value = [];
  question.value = '';
};

const question = ref('');
const dialogues = ref([]);
const isSending = ref(false);

async function send() {
  const trimmedQuestion = question.value.trim();
  question.value = ''; // 清空输入框
  if (!trimmedQuestion) {
    alert('请输入问题！');
    return;
  }

  try {
    isSending.value = true;
    // 先将问题添加到对话记录中
    dialogues.value.push({
      question: trimmedQuestion,
      answer: '', // 初始时回答为空
    });
    const response = await axios.post('/answer/send',"question="+trimmedQuestion);
    const answer = marked.parse(response.data.data);
    // 更新对话记录中的回答
    dialogues.value[dialogues.value.length - 1].answer = answer;
  } catch (error) {
    // 如果请求失败，记录错误信息
    dialogues.value[dialogues.value.length - 1].answer = `<p class="error">请求失败，错误信息：${error.message}</p>`;
    console.error("请求出错：", error);
  } finally {
    isSending.value = false; // 请求完成后启用按钮
  }
}
</script>

<style scoped>
.common-layout {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.header {
  text-align: center;
  height: auto;
}
h1 {
  color: rgb(69, 158, 203);
}
.input {
  width: 100%;
  margin-bottom: 10px;
}
.send-button {
  margin-top: 10px;
}
.error {
  color: red;
}
.left_menu {
  width: 40px;
  border-radius: 6%;
  background-color: white;
  position: fixed;
  left: 20px;
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: center;
  gap: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.left_menu .el-icon > .el-tag{
  height: 30px;
  display: none;
  position: absolute;
  left: 60px;
  text-align: center;
  line-height: 30px;
}
.left_menu > .el-icon:hover{
  background-color: rgb(117, 204, 248);
  cursor: pointer;
}
.left_menu .el-icon:hover > .el-tag{
  display: block;
}
</style>